<!--
 * @Author: your name
 * @Date: 2021-12-23 08:14:08
 * @LastEditTime: 2022-01-03 17:49:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-douban\src\components\MainHeader.vue
-->
<template>
    <div id="nav">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo color"
            mode="horizontal"
            router
            background-color="rgba(0,0,0,0.2)"
            active-text-color="rgb(9, 130, 230)"
        >
            <el-submenu index="/">
                <template slot="title">首页</template>
                <el-menu-item index="/">电影</el-menu-item>
                <el-menu-item index="/movieshome">电视剧</el-menu-item>
                <el-menu-item index="/bookshome">书籍</el-menu-item>
            </el-submenu>
            <el-menu-item index="/about">电影库</el-menu-item>
            <el-menu-item index="/movies">电视剧库</el-menu-item>
            <el-menu-item index="/books">书籍库</el-menu-item>
            <el-submenu class="float-right" index="" v-if="hasLogin">
                <template class="color" slot="title">{{this.username.users.username}}</template>
                <el-menu-item index="/userinfo">个人信息</el-menu-item>
                <el-menu-item index="/" @click="exitLogin">退出登录</el-menu-item>
            </el-submenu>
            <div v-else>
            <el-menu-item index="/register" class="float-right" >注册</el-menu-item>
            <el-menu-item index="/login" class="float-right" >登录</el-menu-item>
            </div>
        </el-menu>
    </div>
</template>

<script>
import { getToken, removeToken, getUserInfo } from '@/utils/auth'
export default {
    name: 'VueDoubanMainheader',
    // inject: ["reload"],
    data() {
        return {
            token: null,
            username: "",
            activeIndex: "",
            
        };
    },
    created() {
        this.token = getToken();
        this.username = getUserInfo();
    },
    computed:{
        hasLogin() {
            return !!this.token;
        },
    },
    mounted() {

    },

    methods: {
        exitLogin() {
            removeToken();
            // this.reload();
            this.$router.go(0)
        },
        
    },
};
</script>

<style lang="scss" scoped>
.float-right {
    float: right;
    color: honeydew;
    height: 60px;
}
.color{
    color: honeydew;
}
</style>